<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>商品详情</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=1.0,initial-scale=1.0,user-scalable=no" />
	<script src="./js/zepto.js"></script>
	<script src="./js/fx.js"></script>
	<script src="./js/rem.js"></script>
	<script src="./js/touch.min.js"></script>
	<script src="./js/laytpl.js"></script>
	<link rel="stylesheet" href="./css/shopContent.css?v=2.5" />
</head>
<body>
	<section id="goodswrapper">
		
	</section>
	<script type="text/html" id="goodscontent">
		<div class="banner-wrapper">
			<div class="banner-box" style="height:8rem;border-bottom: 1px solid #eee;">
				<div class="swiper-container box">
					<ul class="swiper-wrapper box1 notice-pic" >
						{{# for(var i=0,arr=JSON.parse(d.pics);i<arr.length;i++){ }}
							<li class="swiper-slide aa" style="display:inline-block;">
								<img src="{{arr[i].url}}" alt="">
							</li>
						{{# } }}
					</ul>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div class="goods-intro">
				<div class="bottomCon">
					<p><span>{{d.name}}</span></p>
				</div>
				<div class="topIconContent">
					<div class="pricewrapper">
						<!-- <span><img src="./img/danwei.png" alt=""></span>-->
						<em style="color:#f00;left:-0rem;">￥{{d.sell_price}}</em>
					</div>
					
				</div>
				
			</div>
		</div>
			
		
		<div class="main" id="content1">
			<h3 class="h3-title">
				商品详情
			</h3>

			<div class="img-content" >
				{{d.introduce}}
				
			</div>
		</div>
	</script>	
</body>

<script>
		var index=0;
		var timer=null;
		
		
		function go(){
			// self.index++;
			// if(self.index > $('.notice-pic>li').size()-1){
			// 	self.index = 0;
			// }
			console.log($('#goodswrapper').animate)
			$('.notice-pic').animate({
				'left':-$('.notice-pic>li').width()*self.index+'px'
			},1000);
		};

	function formatTemplate(dta, tmpl) {  
        var b;
        var format = { 
            price: function(x) {  
                // console.log(typeof x,this.discount);
                return (x*b).toFixed(2); 
            },
            discount:function(a){
                b=a==0?1:a*0.1;
                return b;
            }
        };  
        return tmpl.replace(/{(\w+)}/g, function(m1, m2) {  
            if (!m2)  
                return "";  
            return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];  
        });  
    }
	function request(method,url,fun,data){
    	// console.log(url);
        data=data||{};
        url+="?v="+new Date().getTime();
    	$.ajax({
    		type:method,
		   	url:url,
		   	data:data||{date:new Date().getTime()},
		   	success: function(msg){
				if(fun){
                    fun(msg);
                    }  		 	
		   },
       error:function(e){
         console.log(JSON.stringify(e));
        
            }
        })
		
    }

    var arr=location.href.split('?');

    var id=arr?arr[1].split('=')[1]:0;


    request('get','/api/wares/info',function(data){
    	console.log(data)
    	if(data.code==200){
    		var goodso=data.data.cnt;
    		$('#goodswrapper').html('');
    		var tpl=goodscontent.innerHTML;
    		laytpl(tpl).render(goodso,function(html){
    			$('#goodswrapper').append(html);
    		})
    		$(".notice-pic").html($(".notice-pic").html()+$(".notice-pic").html());	
		var len=$(".notice-pic>li").size();
		$(".notice-pic").width(len*$('.notice-pic>li').width());
		clearInterval(timer);
		timer=setInterval(function () {
			index==len/2?self.index=0:self.index++;
            index==0?$('.notice-pic').css({left:0}):'';
			go();
		},2000)
    	}
    },{id:id})

		
</script>
</html>